<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<base href="${BaseContext}">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>统计分析</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>

<script type="text/javascript" src="static/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	
</script>
<style type="text/css">
.jumbotron {
	width: 90%;
	margin: 0 auto;
	padding-left: 5%;
	border-radius: 5px;
}

#div1 {
	margin-top: 20px;
}

#table1 {
	text-align: center;
	margin-top: 10px;
}

#table1 th {
	text-align: center;
}

#nav1 {
	margin-right: 0px;
}

#div {
	width: 100%;
	min-width: 1000px;
}
</style>
</head>

<body>
	<div id="div">
		<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#" style="padding-left: 50px">视频管理系统</a>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="admin/video">视频管理 <span class="sr-only">(current)</span></a></li>
					<li><a href="admin/speaker">主讲人管理</a></li>
					<li><a href="admin/course">课程管理</a></li>
					<li><a href="admin/statistics">统计分析</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right" style="padding-right: 50px">
					<li><a href="#">${admin.login_name }</a></li>
					<li><a href="admin/logout.do"><span
							class="glyphicon glyphicon-log-out" aria-hidden="true"></span></a></li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid --> </nav>
		<div class="jumbotron">
			<h2>统计 - 统计分析</h2>
		</div>
		<body>
			<div id="container"
				style="min-width: 500px; width: 1200px; height: 500px; margin: 0 auto"></div>
			<script type="text/javascript">
				$(function() {

					//使用ajax请求数据
					$.ajax({
						url : "admin/data",
						dataType : "json",
						success : function(data) {
							charts(data.title, data.seriesData);
							//$("text.highcharts-credits").remove();
						},
						error : function() {
							alert("数据请求失败");
						}
					});
				})
				function charts(titledata, seriesdata) {
					//alert(JSON.stringify(seriesdata));	

					// Create the chart
					Highcharts
							.chart(
									'container',
									{
										chart : {
											type : 'column'
										},
										title : titledata,//text : {'2016年高级编程语言占比'},
										subtitle : {
											text : '数据来源: <a href="http://www.zhiyou100.com">zhiyou100.com</a>.'
										},
										xAxis : {
											type : 'category'
										},
										yAxis : {
											title : {
												text : '平均播放次数(times)'
											}
										},
										legend : {
											enabled : true
										},
										plotOptions : {
											series : {
												borderWidth : 0,
												dataLabels : {
													enabled : true,
													format : '{point.y:.2f}'
												}
											}
										},
										tooltip : {
											headerFormat : '<span style="font-size:11px">{series.name}</span><br>',
											pointFormat : '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>'
										},
										series : seriesdata
									//[ {name : '语言种类',colorByPoint : true,data : [ {name : 'JAVA',y : 21.465,}, {name : 'C',y : 16.036,}, {name : 'C++',y : 6.914,}, {name : 'C#',y : 4.707,}, {name : 'PYTHON',y : 3.854,}, {name : 'PHP',y : 2.706,} ]} ],
									});
				}
			</script>
		</body>
</html>

</body>
</html>
